import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/article',
    component: () => import('@/views/article/index.vue')
  },
  {
    path: '/search',
    component: () => import('@/views/search/index.vue')
  },
  {
    path: '/result',
    component: () => import('@/views/search/result.vue'),
    meta: {
      keepAlive: true
    }
  },
  // {
  //   path: '/',
  //   redirect: '/layout/home'
  // },
  {
    path: '/layout',
    component: () => import('@/views/layout/index.vue'),
    children: [
      {
        path: 'home', // 二种写法，相对，不以/开头，绝对  以/开头
        // name: 'Home',
        component: () => import('@/views/home/index.vue'),
        meta: {
          keepAlive: true
        }
      },
      {
        path: 'ask',
        component: () => import('@/views/ask/index.vue')
      },
      {
        path: 'video',
        component: () => import('@/views/video/index.vue')
      },
      {
        path: 'mine',
        component: () => import('@/views/mine/index.vue'),
        meta: {
          needLogin: true // 表示 需要登陆才可访问
        }
      },
      {
        path: 'chat',
        component: () => import('@/views/mine/chat.vue'),
        meta: {
          needLogin: true // 表示 需要登陆才可访问
        }
      },
      {
        path: 'edit', // /layout/edit
        component: () => import('@/views/mine/edit.vue'),
        meta: {
          needLogin: true, // 表示 需要登陆才可访问
          noTab: true
        }
      }
    ]
  },
  {
    path: '*',
    redirect: '/layout/home'
  }
]

const router = new VueRouter({
  routes,
  scrollBehavior: () => {
    // 每次页面跳转时执行对应页面的滚动条处理
    return {
      x: 0,
      y: 0
    }
  }
})
// 全局路由勾子
// 前置守卫
// 所有的路由进入前都会经过该守卫
router.beforeEach(async (to, from, next) => {
  // console.log('to', to)
  // to:要去的页面的路由  from:从哪来的路由
  // next():正常通过  next('/login'):跳转的跳转地址
  /*
    判断页面是否需要登陆才可访问
        需要
           判断是否存在token
                存在
                   放行
                不存在
                    返回登录页
        不需要
           放行
   vue:this.$store.state.属性  js:import store from '@/store'     store===this.$store
*/

  // console.log('to', to)
  // next()
  if (to.meta.needLogin) {
    if (store.state.tokenObj.token) {
      // 进入前先获取用户信息
      //  没有用户信息
      //      调用完成后进入页面
      //   有用户信息
      //       直接进入
      // if (store.state.userInfo.id) {
      //   next()
      // } else {
      //   // console.log(1)
      //   await store.dispatch('getUserInfo')
      //   // console.log(2)
      //   next()
      //   // 1  2   3
      // }
      next()
      // store.dispatch('getUserInfo')
    } else {
      // 跳转到登录页时告诉登陆页回跳页面
      /*
      路由传值
          path传值
              传
                 this.$router.push('/xxx?参数名=值')
              收
                 xxx所对应页面接收
                 this.$route.query.参数名
           动态路由匹配
              配制路由
                 {
                   path:'/xxx/:id'
                 }
                传：this.$router.push('/xxx/123')
                收：this.$route.params.id
           name传参
      */
      next('/login?back=' + to.fullPath)
    }
  } else {
    next()
  }
})
// router.afterEach(() => {
//   window.scrollTo(0, 0)
// })
// 路由错误统一捕获
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return routerPush.call(this, location).catch(error => error)
}
export default router
